<script type="text/javascript">
	function refreshMap(){
		var mapCenter = new google.maps.LatLng('{{=addrData[0][1]}}','{{=addrData[0][2]}}');
		var mapOptions = {
			zoom: 13,
			center: mapCenter,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		var markerPos = new google.maps.LatLng('{{=addrData[0][1]}}','{{=addrData[0][2]}}');
		var blueMarker = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
		var markerOptions = {
			position: markerPos,
			map: map,
			animation: google.maps.Animation.DROP,
			title: "{{=addrData[0][0]}}",
			icon: blueMarker
		};
		var marker = new google.maps.Marker(markerOptions);

		{{if storeData == "null":}}
			alert("Sorry, no stores found near your location. Buy it online.");
			var stores = [
			{{for row in data:}}
				['{{=row[0]}}','{{=row[2]}}','{{=row[3]}}'],
			{{pass}}
			];

		{{else:}}
			var stores = [
			{{for row in storeData:}}
				['{{=row[0]}}','{{=row[1]}}','{{=row[2]}}','{{=row[3]}}'],
			{{pass}}
			];

		{{pass}}

		setMarkers(map, stores)

		infowindow = new google.maps.InfoWindow({
			content: "loading..."
		});
	}

	function setMarkers(map, locations) {
		for (var i = 0; i < locations.length; i++) {
			var store = locations[i];
			var myLatLng = new google.maps.LatLng(store[2],store[3]);

			var infoContent = "<b>Address: </b>" + store[0] + 
							  "<br>" + "<b>Distance: </b>" + store[1] + 
							  "<br><input id=\"directionsInput\"name=\"directionsInput\" type=\"text\" value=\""+"{{=addrData[0][0]}}--"+store[0]+"\"></input>" +
							  "<br>" + "<input type=\"submit\" value=\"Get Directions\" onclick=\"ajax('{{=URL('getDirections')}}',['directionsInput'],'map_canvas')\"/>"

			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				title: store[0],
				animation: google.maps.Animation.DROP,
				html: infoContent
				});

				google.maps.event.addListener(marker, "click", function(){
					infowindow.setContent(this.html);
					infowindow.open(map, this);
				});
		}
	}

	function showHideDiv(showid,hideid) {
		$('#'+showid).show();
		$('#'+hideid).hide();
	}

</script>

<script type="text/javascript">
	showHideDiv("map_canvas","loading")
	refreshMap();
</script>